import React, { Component } from 'react'
import './index.less'
export default class index extends Component {
  state={
    active:'1'
  }
  handleClick=(value)=>{
    this.setState({active:value})
    console.log(value)
  }
  render() {
    const{active}=this.state
    return (
      <div className="cdyyIndex">
        <div className="header-img">
          <img src={require('../../img/场地预约-海报.png')} alt=""/>
        </div>
        <div className="contorl">
          <div id="1" style={{color:active==='1'?'#000000':'#adada4'}} onClick={(e)=>this.handleClick(e.target.id)}>所有房间 <div className={active==="1"? 'line':''}></div></div>
          <div id="2"style={{color:active==='2'?'#000000':'#adada4'}} onClick={(e)=>this.handleClick(e.target.id)}>我的预约 <div className={active==="2"? 'line':''}></div>
          </div>
        </div>
        <div style={{display:active==="1"?'block':'none',marginTop:'-25px'}}>
          <div className="content">
            <div className="left">
              <img src={require('../../img/场地预约-微格教室.png')} alt=""/>
            </div>
            <div className="right">
              <div className="right-1"><span>空闲中</span><span>微格教室（1）</span></div>
              <div className="right-2">1楼102室</div>
              <div className="right-3">
                <span>容纳30人</span><span>立即预约</span>
              </div>
            </div>
          </div>

          <div className="content">
            <div className="left">
              <img src={require('../../img/场地预约-微格教室.png')} alt=""/>
            </div>
            <div className="right">
              <div className="right-1"><span>空闲中</span><span>微格教室（1）</span></div>
              <div className="right-2">2楼206室</div>
              <div className="right-3">
                <span>容纳30人</span><span>立即预约</span>
              </div>
            </div>
          </div>
        </div>
        <div style={{display:active==="2"?'block':'none'}}>我的预约</div>
      </div>
    )
  }
}
